<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建产品 - 商品竞品分析系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-dark: #3a56d4;
            --secondary-color: #7209b7;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #38b000;
            --warning-color: #ffb700;
            --danger-color: #d90429;
            --info-color: #4cc9f0;
        }
        body {
            background-color: #f5f7fb;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .main-content {
            flex: 1;
        }
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .navbar-brand {
            font-weight: 700;
            color: var(--dark-color);
        }
        .nav-link {
            color: var(--dark-color);
            font-weight: 500;
        }
        .nav-link:hover {
            color: var(--primary-color);
        }
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .card-header {
            background-color: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
        }
        .card-header h5 {
            margin-bottom: 0;
            font-weight: 600;
            color: var(--dark-color);
        }
        .card-body {
            padding: 1.5rem;
        }
        .form-control, .form-select {
            padding: 0.75rem 1rem;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            font-size: 1rem;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.15);
        }
        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #4a5568;
        }
        .form-text {
            color: #718096;
        }
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            border-radius: 8px;
        }
        .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(67, 97, 238, 0.2);
        }
        .btn-secondary {
            background-color: #e2e8f0;
            border-color: #e2e8f0;
            color: #4a5568;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            border-radius: 8px;
        }
        .btn-secondary:hover {
            background-color: #cbd5e0;
            border-color: #cbd5e0;
            color: #2d3748;
        }
        .footer {
            background-color: white;
            padding: 2rem 0;
            margin-top: auto;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05);
        }
        .product-type-card {
            cursor: pointer;
            transition: all 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .product-type-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .product-type-card .card-body {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 2rem;
        }
        .product-type-card.selected {
            border: 2px solid var(--primary-color);
            box-shadow: 0 10px 20px rgba(67, 97, 238, 0.15);
        }
        .product-type-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.1);
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .product-type-card:hover .product-type-icon,
        .product-type-card.selected .product-type-icon {
            background-color: var(--primary-color);
            color: white;
        }
        .product-type-card .card-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        .product-type-card .card-text {
            color: #718096;
        }
        .form-step {
            display: none;
        }
        .form-step.active {
            display: block;
        }
        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }
        .step-bubble {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e2e8f0;
            color: #4a5568;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin: 0 0.5rem;
            position: relative;
        }
        .step-bubble.active {
            background-color: var(--primary-color);
            color: white;
        }
        .step-bubble.completed {
            background-color: var(--success-color);
            color: white;
        }
        .step-bubble::after {
            content: '';
            height: 2px;
            background-color: #e2e8f0;
            position: absolute;
            top: 50%;
            width: 100%;
            left: 100%;
            transform: translateY(-50%);
            z-index: -1;
        }
        .step-bubble:last-child::after {
            display: none;
        }
        .step-bubble.completed::after {
            background-color: var(--success-color);
        }
        .step-label {
            text-align: center;
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: #4a5568;
            font-weight: 500;
        }
        #previewImage {
            width: 100%;
            max-height: 200px;
            object-fit: contain;
            margin-top: 1rem;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-chart-pie me-2"></i>
                商品竞品分析系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">
                            <i class="fas fa-home me-1"></i> 首页
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-5 main-content">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-plus-circle me-2"></i> 创建新产品分析</h5>
                    </div>
                    <div class="card-body">
                        <!-- 步骤指示器 -->
                        <div class="step-indicator">
                            <div class="d-flex flex-column align-items-center">
                                <div class="step-bubble active" id="step1Bubble">1</div>
                                <div class="step-label">选择产品类型</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <div class="step-bubble" id="step2Bubble">2</div>
                                <div class="step-label">基本信息</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <div class="step-bubble" id="step3Bubble">3</div>
                                <div class="step-label">完成创建</div>
                            </div>
                        </div>

                        <!-- 步骤1: 选择产品类型 -->
                        <div class="form-step active" id="step1">
                            <h4 class="mb-4 text-center">选择要分析的产品类型</h4>
                            <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
                                <div class="col">
                                    <div class="card product-type-card" data-product-type="电子产品">
                                        <div class="card-body">
                                            <div class="product-type-icon">
                                                <i class="fas fa-mobile-alt"></i>
                                            </div>
                                            <h5 class="card-title">电子产品</h5>
                                            <p class="card-text">手机、电脑、智能手表等电子设备</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card product-type-card" data-product-type="服装鞋帽">
                                        <div class="card-body">
                                            <div class="product-type-icon">
                                                <i class="fas fa-tshirt"></i>
                                            </div>
                                            <h5 class="card-title">服装鞋帽</h5>
                                            <p class="card-text">各类服装、鞋子、帽子和服饰配件</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card product-type-card" data-product-type="美妆护肤">
                                        <div class="card-body">
                                            <div class="product-type-icon">
                                                <i class="fas fa-spa"></i>
                                            </div>
                                            <h5 class="card-title">美妆护肤</h5>
                                            <p class="card-text">化妆品、护肤品、香水等美容产品</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card product-type-card" data-product-type="家居用品">
                                        <div class="card-body">
                                            <div class="product-type-icon">
                                                <i class="fas fa-home"></i>
                                            </div>
                                            <h5 class="card-title">家居用品</h5>
                                            <p class="card-text">家具、家电、厨具和生活用品</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card product-type-card" data-product-type="食品饮料">
                                        <div class="card-body">
                                            <div class="product-type-icon">
                                                <i class="fas fa-utensils"></i>
                                            </div>
                                            <h5 class="card-title">食品饮料</h5>
                                            <p class="card-text">各类食品、饮料、零食和调味品</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card product-type-card" data-product-type="其他">
                                        <div class="card-body">
                                            <div class="product-type-icon">
                                                <i class="fas fa-box"></i>
                                            </div>
                                            <h5 class="card-title">其他</h5>
                                            <p class="card-text">其他种类的产品</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center mt-4">
                                <button id="nextToStep2" class="btn btn-primary" disabled>
                                    下一步 <i class="fas fa-arrow-right ms-1"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 步骤2: 产品信息 -->
                        <div class="form-step" id="step2">
                            <h4 class="mb-4 text-center">填写产品基本信息</h4>
                            <form id="createProductForm">
                                <div class="mb-3">
                                    <label for="productName" class="form-label">产品名称</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-tag"></i></span>
                                        <input type="text" class="form-control" id="productName" name="name" required>
                                    </div>
                                    <div class="form-text">请输入产品的名称，例如：品牌 + 型号</div>
                                </div>
                                <div class="mb-3">
                                    <label for="productDesc" class="form-label">产品描述</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-align-left"></i></span>
                                        <textarea class="form-control" id="productDesc" name="description" rows="3"></textarea>
                                    </div>
                                    <div class="form-text">简要描述这个产品的特点和用途</div>
                                </div>
                                <div class="mb-3">
                                    <label for="productType" class="form-label">产品类型</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-list"></i></span>
                                        <input type="text" class="form-control" id="productType" name="product_type" readonly>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="productImage" class="form-label">产品封面图片 (可选)</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-image"></i></span>
                                        <input type="file" class="form-control" id="productImage" name="product_image" accept="image/*">
                                    </div>
                                    <div class="form-text">上传一张代表性的产品图片作为封面</div>
                                    <img id="previewImage" src="" alt="预览图">
                                </div>
                                <div class="d-flex justify-content-between mt-4">
                                    <button type="button" id="backToStep1" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i> 返回
                                    </button>
                                    <button type="button" id="nextToStep3" class="btn btn-primary">
                                        下一步 <i class="fas fa-arrow-right ms-1"></i>
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- 步骤3: 确认信息 -->
                        <div class="form-step" id="step3">
                            <h4 class="mb-4 text-center">确认产品信息</h4>
                            <div class="alert alert-info mb-4">
                                <i class="fas fa-info-circle me-2"></i> 请确认以下信息无误，创建后您将进入产品详情页上传图片进行分析
                            </div>
                            <div class="p-4 border rounded bg-light mb-4">
                                <div class="row mb-3">
                                    <div class="col-md-4 fw-bold">产品名称：</div>
                                    <div class="col-md-8" id="confirmName"></div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-4 fw-bold">产品类型：</div>
                                    <div class="col-md-8" id="confirmType"></div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-4 fw-bold">产品描述：</div>
                                    <div class="col-md-8" id="confirmDesc"></div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" id="backToStep2" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-1"></i> 返回
                                </button>
                                <button type="button" id="submitProduct" class="btn btn-primary">
                                    <i class="fas fa-check me-1"></i> 创建产品
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>商品竞品分析系统</h5>
                    <p class="text-muted">基于AI的产品信息智能分析工具</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0 text-muted">&copy; 2025 商品竞品分析系统</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 产品类型选择
            const productTypeCards = document.querySelectorAll('.product-type-card');
            const nextToStep2Btn = document.getElementById('nextToStep2');
            const productTypeInput = document.getElementById('productType');
            
            productTypeCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 移除其他卡片的选中状态
                    productTypeCards.forEach(c => c.classList.remove('selected'));
                    // 添加当前卡片的选中状态
                    this.classList.add('selected');
                    // 启用下一步按钮
                    nextToStep2Btn.disabled = false;
                    // 设置选中的产品类型
                    const productType = this.getAttribute('data-product-type');
                    productTypeInput.value = productType;
                });
            });
            
            // 步骤导航
            const step1 = document.getElementById('step1');
            const step2 = document.getElementById('step2');
            const step3 = document.getElementById('step3');
            const step1Bubble = document.getElementById('step1Bubble');
            const step2Bubble = document.getElementById('step2Bubble');
            const step3Bubble = document.getElementById('step3Bubble');
            
            // 步骤1到步骤2
            nextToStep2Btn.addEventListener('click', function() {
                step1.classList.remove('active');
                step2.classList.add('active');
                step1Bubble.classList.remove('active');
                step1Bubble.classList.add('completed');
                step2Bubble.classList.add('active');
            });
            
            // 步骤2返回步骤1
            document.getElementById('backToStep1').addEventListener('click', function() {
                step2.classList.remove('active');
                step1.classList.add('active');
                step2Bubble.classList.remove('active');
                step1Bubble.classList.remove('completed');
                step1Bubble.classList.add('active');
            });
            
            // 步骤2到步骤3
            document.getElementById('nextToStep3').addEventListener('click', function() {
                const productName = document.getElementById('productName').value;
                const productDesc = document.getElementById('productDesc').value;
                
                // 验证表单
                if (!productName) {
                    alert('请输入产品名称');
                    return;
                }
                
                // 更新确认信息
                document.getElementById('confirmName').textContent = productName;
                document.getElementById('confirmType').textContent = productTypeInput.value;
                document.getElementById('confirmDesc').textContent = productDesc || '无';
                
                // 切换到步骤3
                step2.classList.remove('active');
                step3.classList.add('active');
                step2Bubble.classList.remove('active');
                step2Bubble.classList.add('completed');
                step3Bubble.classList.add('active');
            });
            
            // 步骤3返回步骤2
            document.getElementById('backToStep2').addEventListener('click', function() {
                step3.classList.remove('active');
                step2.classList.add('active');
                step3Bubble.classList.remove('active');
                step2Bubble.classList.remove('completed');
                step2Bubble.classList.add('active');
            });
            
            // 图片预览
            document.getElementById('productImage').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const previewImage = document.getElementById('previewImage');
                        previewImage.src = e.target.result;
                        previewImage.style.display = 'block';
                    }
                    reader.readAsDataURL(file);
                }
            });
            
            // 提交产品表单
            document.getElementById('submitProduct').addEventListener('click', function() {
                const form = document.getElementById('createProductForm');
                const formData = new FormData(form);
                
                // 显示加载状态
                this.disabled = true;
                this.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>创建中...';
                
                // 发送请求创建产品
                fetch('/api/products', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.id) {
                        window.location.href = `/products/${data.id}`;
                    } else {
                        alert('创建产品失败：' + (data.detail || '未知错误'));
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-check me-1"></i> 创建产品';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('创建产品失败，请重试');
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-check me-1"></i> 创建产品';
                });
            });
        });
    </script>
</body>
</html> 